<template>
  <tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="120px" :disabled="disableEditSubmit || disableSave">
      <el-row>
        <el-col :span="24">
          <el-divider content-position="left"><span>【项目】基本信息</span></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="customercode" :rules="rules.validateRequire">
            <el-input v-model="model.dispcustomercode" :disabled="true" class="tl-ref-selector">
              <el-button slot="append" type="primary" icon="el-icon-search" @click="openpmCustomerRefDialog" v-if="!disableEditSubmit && !disableSave"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="name" :rules="rules.validateRequire">
            <el-input v-model="model.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目状态" prop="dispprojectstate">
            <el-select v-model="model.dispprojectstate" filterable clearable :disabled="true">
              <el-option v-for="item in codeModel.projectstateList" :key="item.code" :label="item.name" :value="item.code" :disabled="true" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目金额" prop="projectmoney" :rules="rules.validateRequire">
            <el-input-number v-model="model.projectmoney" controls-position="right" :step="1" :min="0" style="width:95%"></el-input-number>
            <span>元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属省份" prop="province" :rules="rules.validateRequire">
            <!-- <el-input v-model="model.province"></el-input> -->
            <el-select v-model="model.province" filterable clearable>
              <el-option v-for="item in codeModel.provinceList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目编号" prop="code">
            <el-input v-model="model.code" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人天估算" prop="mandays" :rules="rules.validateRequire">
            <el-input-number v-model="model.mandays" controls-position="right" :step="1" :min="0" style="width:100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预算总金额" prop="budgetmoney">
            <el-input-number v-model="model.budgetmoney" controls-position="right" :step="1" style="width:95%" :disabled="true"></el-input-number>
            <span>元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目成果" prop="projectresult">
            <el-input v-model="model.projectresult"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目类别" prop="category" :rules="rules.validateRequire">
            <el-select v-model="model.category" filterable clearable>
              <el-option v-for="item in codeModel.categoryList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属部门" prop="ownerdeptname" :rules="rules.validateRequire">
            <tl-ref-dept v-model="model.ownerdeptname" :initDisplayData.sync="model.ownerdeptname" dataType="code" :disabled="disableEditSubmit || disableSave" nameType="fullname" :singleSelect="true" :externalQueryParam="{qry_enabled:1}"></tl-ref-dept>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司" prop="ownerorgname">
            <el-input v-model="model.ownerorgname" :readonly="true" class="is-disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目经理" prop="projectmanagername" :rules="rules.validateRequire">
            <tl-ref-user v-model="model.projectmanagername" :initDisplayData.sync="model.projectmanagername" :disabled="disableEditSubmit || disableSave" dataType="code" :singleSelect="true" @confirm="projectmanagernameConfirm"></tl-ref-user>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售经理" prop="areamanagername" :rules="rules.validateRequire">
            <tl-ref-user v-model="model.areamanagername" :initDisplayData.sync="model.areamanagername" :disabled="disableEditSubmit || disableSave" @confirm="areamanagernameConfirm" dataType="code" :singleSelect="true"></tl-ref-user>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="立项批准人" prop="approvalname" v-show="model.projectstate != '0' && model.projectstate != null">
            <tl-ref-user v-model="model.approvalname" :initDisplayData.sync="model.approvalname" :disabled="true" dataType="code" :singleSelect="true"></tl-ref-user>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="立项日期" prop="approvaltime" v-show="model.projectstate != '0' && model.projectstate != null">
            <el-date-picker v-model="model.approvaltime" type="date" placeholder="立项日期" :disabled="true" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="计划开工日期" prop="planstarttime" :rules="rules.validateRequire">
            <el-date-picker v-model="model.planstarttime" type="date" placeholder="计划开工日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划完工日期" prop="planendtime" :rules="rules.validateRequire">
            <el-date-picker v-model="model.planendtime" type="date" placeholder="计划完工日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否含产品" prop="isincludeproducts">
            <el-select v-model="model.isincludeproducts" filterable clearable>
              <el-option v-for="item in codeModel.isincludeproductsList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否外包" prop="ispurchase" :rules="rules.validateRequire">
            <el-select v-model="model.ispurchase" filterable clearable>
              <el-option v-for="item in codeModel.ispurchaseList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="产品明细" prop="productdetails" v-show="model.isincludeproducts == '1'" :rules="model.isincludeproducts == '1' ? rules.validateRequire : { required: false }">
            <el-input v-model="model.productdetails" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="外包说明" prop="purchasedescription" v-show="model.ispurchase == '1'" :rules="model.ispurchase == '1' ? rules.validateRequire : { required: false }">
            <el-input v-model="model.purchasedescription" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目背景" prop="background">
            <el-input v-model="model.background" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目概况" prop="overview">
            <el-input v-model="model.overview" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目目标" prop="projecttarget" :rules="rules.validateRequire">
            <el-input v-model="model.projecttarget" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="承接原因" prop="reason">
            <el-input v-model="model.reason" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="风险评估" prop="riskassessment" :rules="rules.validateRequire">
            <el-input v-model="model.riskassessment" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="应对策略" prop="riskcountermeasures" :rules="rules.validateRequire">
            <el-input v-model="model.riskcountermeasures" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="description">
            <el-input v-model="model.description" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form class="tl-form" ref="monitorform" :model="model" :rules="rules" label-width="120px" :disabled="disableEditSubmit || disableSave">
        <el-row>
          <el-col :span="24">
            <el-divider content-position="left"><span>【项目财务】相关信息</span></el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同总金额" prop="contractmoney">
              <el-input-number v-model="model.contractmoney" controls-position="right" :step="1" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款总金额" prop="recbillmoney">
              <el-input-number v-model="model.recbillmoney" controls-position="right" :step="1" :min="0" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票总金额" prop="billmoney">
              <el-input-number v-model="model.billmoney" controls-position="right" :step="1" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收据总金额" prop="receiptmoney">
              <el-input-number v-model="model.receiptmoney" controls-position="right" :step="1" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="确认收入总金额" prop="confirmrevenuemoney">
              <el-input-number v-model="model.confirmrevenuemoney" controls-position="right" :step="1" :min="0" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成本总金额" prop="costmoney">
              <el-input-number v-model="model.costmoney" controls-position="right" :step="1" :min="0" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购申请金额" prop="purchasemoney">
              <el-input-number v-model="model.purchasemoney" controls-position="right" :step="1" :min="0" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购合同金额" prop="purchasecontractmoney">
              <el-input-number v-model="model.purchasecontractmoney" controls-position="right" :step="1" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购付款金额" prop="purchasepaymentmoney">
              <el-input-number v-model="model.purchasepaymentmoney" controls-position="right" :step="1" :min="0" style="width:95%" :disabled="true"></el-input-number>
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="签约率">
              <el-input v-model="signingFormat" controls-position="right" :readonly="true" class="is-disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开票率">
              <el-input v-model="billingFormat" :readonly="true" class="is-disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收款率">
              <el-input v-model="recbillingFormat" :readonly="true" class="is-disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毛利率">
              <el-input v-model="grossMarginFormat" :readonly="true" class="is-disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-divider content-position="left"><span>【项目监控】相关信息</span></el-divider>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="超期状态" prop="overduestatus">
              <el-select v-model="model.overduestatus" filterable clearable :disabled="true">
                <el-option v-for="item in codeModel.overduestatusList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实际开工日期" prop="actualstarttime">
              <el-date-picker v-model="model.actualstarttime" type="date" placeholder="实际开工日期" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际完工日期" prop="actualendtime">
              <el-date-picker v-model="model.actualendtime" type="date" placeholder="实际完工日期" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实际闭环日期" prop="actualclosetime">
              <el-date-picker v-model="model.actualclosetime" type="date" placeholder="实际闭环日期" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-divider content-position="left"><span>【单据】相关信息</span></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请部门" prop="deptname">
            <tl-ref-dept v-model="model.deptcode" :initDisplayData.sync="model.deptname" :disabled="true" dataType="code" nameType="fullname" :singleSelect="true" :externalQueryParam="{qry_enabled:1}"></tl-ref-dept>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请公司" prop="orgname">
            <el-input v-model="model.orgname" :readonly="true" class="is-disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请人" prop="username">
            <tl-ref-user v-model="model.username" :initDisplayData.sync="model.username" :disabled="true" dataType="code" :singleSelect="true"></tl-ref-user>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人工号" prop="usercode">
            <el-input v-model="model.usercode" :readonly="true" class="is-disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单据日期" prop="docdate" :rules="rules.validateRequire">
            <el-date-picker v-model="model.docdate" type="date" placeholder="单据日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交时间" prop="submitdate">
            <el-date-picker v-model="model.submitdate" type="datetime" placeholder="提交时间" disabled></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="审批流程" prop="flowid">
            <el-input v-model="model.dispflowid" :readonly="true" class="is-disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="state">
            <el-input v-model="model.dispstate" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
    </div>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
/** 子组件 */
import tlpmCustomerRef from '@/views/ProjectManage/pmCustomer/refList.vue'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_approval_edit],
  components: { tlpmCustomerRef },
  data() {
    return {
      moduleTitle: '项目基本信息',
      urlPrefix: '/pm/project/',
      url: {
        // 额外的url
      },
      aaa: true
    }
  },
  computed: {
    // 签约率计算
    signingFormat() {
      if (this.model.projectmoney === 0) {
        return '0'
      } else {
        const percent = (this.model.contractmoney / this.model.projectmoney).toFixed(2)
        if (percent >= 0) {
          return percent * 100 + '%'
        } else {
          return '0'
        }
      }
    },
    // 开票率计算
    billingFormat() {
      if (this.model.projectmoney === 0) {
        return '0'
      } else {
        const percent = (this.model.billmoney / this.model.projectmoney).toFixed(2)
        if (percent >= 0) {
          return percent * 100 + '%'
        } else {
          return '0'
        }
      }
    },
    // 收款率计算
    recbillingFormat() {
      if (this.model.projectmoney === 0) {
        return '0'
      } else {
        const percent = (this.model.recbillmoney / this.model.projectmoney).toFixed(2)
        if (percent >= 0) {
          return percent * 100 + '%'
        } else {
          return '0'
        }
      }
    },
    // 毛利率计算
    grossMarginFormat() {
      if (this.model.projectmoney === 0) {
        return '0'
      } else {
        const percent = (
          (this.model.projectmoney - this.model.budgetmoney) /
          this.model.projectmoney
        ).toFixed(2)
        if (percent >= 0) {
          return percent * 100 + '%'
        } else {
          return '0'
        }
      }
    }
  },
  methods: {
    assignDefaultValue() {
      if (this.isAdd) {
        if (this.codeModel.flowidList && this.codeModel.flowidList.length > 0) {
          this.$set(this.model, 'flowid', parseInt(this.codeModel.flowidList[0].id))
          // this.$set(this.model, 'dispflowid', parseInt(this.codeModel.flowidList[0].name))
        }
        this.$set(this.model, 'orgcode', this.org.code)
        this.$set(this.model, 'orgname', this.org.name)
        this.$set(this.model, 'deptcode', this.dept.code)
        this.$set(this.model, 'deptname', this.dept.fullname)
        this.$set(this.model, 'usercode', this.user.code)
        this.$set(this.model, 'username', this.user.name)
      }
    },
    loaded() {
      this.$set(this.model, 'signing', this.signingFormat)
      this.$set(this.model, 'billing', this.billingFormat)
      this.$set(this.model, 'recbilling', this.recbillingFormat)
      this.$set(this.model, 'grossMargin', this.grossMarginFormat)
    },
    /** 打开客户名称参照 */
    openpmCustomerRefDialog() {
      this.$refs.pmCustomerRef.visible = true
    },
    // 所属公司点击确认
    ownerorgnameConfirm(selectionRow) {
      debugger
      this.$set(this.model, 'ownerorgcode', selectionRow[0].code)
      this.$set(this.model, 'ownerorgname', selectionRow[0].name)
    },
    // 所属部门点击确认
    ownerdeptnameConfirm(selectionRow) {
      this.$set(this.model, 'ownerdeptcode', selectionRow[0].code)
      this.$set(this.model, 'ownerdeptname', selectionRow[0].name)
    },
    // 销售经理点击取确认
    areamanagernameConfirm(selectionRow) {
      this.$set(this.model, 'areamanagercode', selectionRow[0].code)
      this.$set(this.model, 'areamanagername', selectionRow[0].name)
    },
    // 项目经理点击确认
    projectmanagernameConfirm(selectionRow) {
      this.$set(this.model, 'projectmanagercode', selectionRow[0].code)
      this.$set(this.model, 'projectmanagername', selectionRow[0].name)
    },
    /** 获取客户名称参数数据 */
    getpmCustomerRefData(selectionRow, selectKey, selectionValue) {
      this.$set(this.model, 'customername', selectionRow.name)
      debugger
      this.$set(this.model, 'customercode', selectionRow.code)
    },
    // 获取省份信息
    selectProvince(data) {
      debugger
      this.$set(this.model, 'province', data.value)
      this.$set(this.model, 'provincecode', data.code)
    }
  }
}
</script>

